{% extends 'base.html' %}
{% block page-content %}
    <div class="container" style="padding: 0px;height: 560px">
        <div class="row" style="height: 550px">
            <div id="div_box" v-if="dataList.length>0">
                <div class="wrap">
                    <div class="smallImg imgBox">
                        <img :src="currentImage" alt="chothes"/>
                        <div id="shadow">
                            <table border="1px" width="100px" height="100px">
                                <tr>
                                    <td class="td_top td_left"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top"></td>
                                    <td class="td_top td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="td_right"></td>
                                </tr>
                                <tr>
                                    <td class="td_left td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_bottom"></td>
                                    <td class="td_right td_bottom"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="bigImg imgBox">
                        <img :src="currentImage" width="800" height="800" alt="chothes"/>
                    </div>
                </div>
                <div id="div_box-right" class="container">

                    <div id="div_box-right-2">
                        <span class="mykey">主题：</span>
                        <span id="div_box-right-2-span_2">[[dataList[0].Title]]</span><span style="font-size: 12pt">[[dataList[0].RecType]]</span>
                    </div>

                    <div id="div_box-right-6" class="mysize">
                        <div class="mykey">简介：</div>
                        <div class="Content">[[dataList[0].Content]]</div>
                    </div>
                    <div id="div_box-right-7" class="mysize">
                        <div class="mykey">描述：</div>
                        <div class="Content">[[dataList[0].Content]]</div>
                    </div>
                    <div id="div_box-right-8">
                        <div id="div_box-right-8-div-1" @click="downLoadData(dataList[0])"><span>立即下载</span></div>
                    </div>
                </div>
                <div id="div_box-bottom">

                        <div :id="'div_box-bottom-left-div-'+(index+1)" v-for="(item,index) in imageList"
                             @click="changeImage(item.PicUrl)"><img :src="item.PicUrl" width="55px" height="55px"/>
                        </div>


                </div>
            </div>
        </div>
     <div class="row" style="margin-left: 0px;height: 260px">

        <div class="col-sm-2" v-for="(item,index) in TJData">
            <div class="product-grid mydiv">
                <div class="product-image">
                    <a href="#" @click="readInfo(item)">
                        <img class="pic-1" :src="item.CoverChart" style="height: 100px">
                    </a>
                </div>
                <div class="product-content">
                    <div class="row-show"><h3 class="title"><a href="#">[[item.Title]]</a></h3>
                        <div class="price" style="color: red;margin-left: 10px"><i class="fa fa-download"></i>[[item.HotValue]]
                        </div>
                    </div>
                    <div class="row-show" style="font-size: 12pt;margin-top: 5px">
                        <div>作者：[[item.UserName]]</div>
                    </div>
                </div>
                <ul class="social">
                    <li><a href="#" data-tip="查看详情" @click="readInfo(item)"><i class="fa fa-info"></i></a>
                    </li>
                    <li><a href="#" data-tip="下载" @click="downLoadData(item)"><i class="fa fa-download"></i></a>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    </div>

{% endblock %}


{% block page-scripts %}
    {#    <script type="text/javascript" src="/static/js/DressSize.js"></script>#}
    {#    <script type="text/javascript" src="/static/js/DressColor.js"></script>#}
    {#    <script type="text/javascript" src="/static/js/NumberOfClothes.js"></script>#}
    {#    <script type="text/javascript" src="/static/js/DressStyle.js"></script>#}
    <script>
        function init() {

            var wrap = document.getElementsByClassName("wrap")[0];
            var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
            var smallImg = smallImgBox.getElementsByTagName("img")[0];
            var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
            var bigImg = bigImgBox.getElementsByTagName("img")[0];
            var shadow = document.getElementById("shadow")

            smallImgBox.onmouseover = function () {
                shadow.style.display = "block";
                bigImgBox.style.display = "block";
            };
            smallImgBox.onmouseout = function () {
                shadow.style.display = "none";
                bigImgBox.style.display = "none";
            }


            smallImgBox.onmousemove = function (ev) {

                var ev = ev || window.event;

                //鼠标在指定div里面的坐标:可视区里面鼠标坐标- div到文档边界的距离
                /*  var x =  ev.clientX  -   shadow.offsetParent.offsetLeft -shadow.offsetParent.offsetParent.offsetLeft   ;
                  var y = ev.clientY  -    shadow.offsetParent.offsetTop  -shadow.offsetParent.offsetParent.offsetLeft;*/
                var x = ev.clientX - smallImgBox.offsetLeft - wrap.offsetLeft;
                var y = ev.clientY - smallImgBox.offsetTop - wrap.offsetTop;


                var l = x - shadow.offsetWidth / 2;
                var t = y - shadow.offsetHeight / 2;

                if (l <= 0) {
                    l = 0;
                } else if (l >= smallImgBox.offsetWidth - shadow.offsetWidth) {
                    l = smallImgBox.offsetWidth - shadow.offsetWidth;
                }
                if (t <= 0) {
                    t = 0;
                } else if (t >= smallImgBox.offsetHeight - shadow.offsetHeight) {
                    t = smallImgBox.offsetHeight - shadow.offsetHeight;
                }
                shadow.style.left = l + "px";
                shadow.style.top = t + "px";

                /*  var  radioX = l /   (smallImgBox.offsetWidth - shadow.offsetWidth);
                  var  radioY = t /  (smallImgBox.offsetHeight - shadow.offsetHeight) ;
                  document.title =radioX+" "+ radioY ;
                  bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
                  bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";*/

                var radioX = x / (smallImgBox.offsetWidth - shadow.offsetWidth) >= 1 ? 1 : x / (smallImgBox.offsetWidth - shadow.offsetWidth);
                var radioY = y / (smallImgBox.offsetHeight - shadow.offsetHeight) >= 1 ? 1 : y / (smallImgBox.offsetHeight - shadow.offsetHeight);

                bigImg.style.left = -radioX * (bigImg.width - bigImgBox.offsetWidth) + "px";
                bigImg.style.top = -radioY * (bigImg.height - bigImgBox.offsetHeight) + "px";

            };
        }

        var vm = new Vue({
            el: '#app',
            // 分割符: 修改vue中显示数据的语法, 防止与django冲突
            delimiters: ['[[', ']]'],
            components: {},
            data: {
                dataList: [],
                imageList: [],
                currentImage: "",
                TJData: []
            },
            created() {
                this.getData();
            },
            methods: {
                async getData() {
                    //获取交流主记录
                    let data = {id: "{{ id }}"};
                    let res = await axiospost("{% url 'data_detail' %}", data);
                    console.log(res);
                    if (res.code == 200) {
                        this.dataList = res.data.items;
                        this.imageList = res.data.imageitems;
                        if (this.dataList.length > 0) {
                            this.currentImage = this.dataList[0].CoverChart;
                        }
                        this.TJData = res.data.TJData;

                        this.$nextTick(() => {
                            init();
                        });
                    }
                },
                changeImage(url) {
                    this.currentImage = url;
                },
                async downLoadData(item) {
                    let data = {id: item.ID};
                    let res = await axiosget("{% url 'download_data' %}", data);
                    console.log(res);
                    if (res.code == 200) {
                        //打开新页面下载
                        window.location.href = res.data.url;
                        //window.open(res.data.url);
                    } else {
                        //跳转充值页面
                        window.location.href = "{% url 'pay_money' %}";
                    }
                },
                 readInfo(item)
                {
                      window.location.href = "{% url 'data_detail' %}?id=" + item.ID ;
                }
            }
        });
    </script>
{% endblock %}

{% block page-styles %}
    <link rel="stylesheet" href="/static/css/Shopping.css"/>
    <style>
        .mysize {
            font-size: 12pt;
        }

        .mykey {
            position: absolute;
            width: 80px;
            height: 100%;
            float: left;
            left: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .Content {
            position: absolute;
            width: 420px;
            height: 100%;
            float: left;
            left: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #div_box-right-8 {
            width: 355px;
            height: 40px;
            margin-top: 80px;
            position: relative;
            margin-left: 90px;
        }


        .product-grid {
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            overflow: hidden;
            position: relative;
            transition: all 0.5s ease 0s;
        }

        .product-grid:hover {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .product-grid .product-image {
            overflow: hidden;
        }

        .product-grid .product-image a {
            display: block;
        }

        .product-grid .product-image img {
            width: 100%;
            height: auto;
            transition: all 0.5s ease 0s;
        }

        .product-grid:hover .product-image img {
            transform: scale(1.1);
        }

        .product-grid .product-content {
            padding: 12px 12px 15px 12px;
            transition: all 0.5s ease 0s;
        }

        .product-grid:hover .product-content {
            opacity: 0;
        }

        .product-grid .title {
            font-size: 20px;
            font-weight: 600;
            text-transform: capitalize;
            margin: 0 0 10px;
            transition: all 0.3s ease 0s;
        }

        .product-grid .title a {
            color: #000;
        }

        .product-grid .title a:hover {
            color: #2e86de;
        }

        .product-grid .price {
            font-size: 18px;
            font-weight: 600;
            color: #2e86de;
        }

        .product-grid .price span {
            color: #999;
            font-size: 15px;
            font-weight: 400;
            text-decoration: line-through;
            margin-left: 7px;
            display: inline-block;
        }

        .product-grid .social {
            background-color: #fff;
            width: 100%;
            padding: 0;
            margin: 0;
            list-style: none;
            opacity: 0;
            transform: translateX(-50%);
            position: absolute;
            bottom: -50%;
            left: 50%;
            z-index: 1;
            transition: all 0.5s ease 0s;
        }

        .product-grid:hover .social {
            opacity: 1;
            bottom: 20px;
        }

        .product-grid .social li {
            display: inline-block;
        }

        .product-grid .social li a {
            color: #909090;
            font-size: 16px;
            line-height: 45px;
            text-align: center;
            height: 45px;
            width: 45px;
            margin: 0 7px;
            border: 1px solid #909090;
            border-radius: 50px;
            display: block;
            position: relative;
            transition: all 0.3s ease-in-out;
        }

        .product-grid .social li a:hover {
            color: #fff;
            background-color: #2e86de;
            width: 80px;
        }

        .product-grid .social li a:before,
        .product-grid .social li a:after {
            content: attr(data-tip);
            color: #fff;
            background-color: #2e86de;
            font-size: 12px;
            letter-spacing: 1px;
            line-height: 20px;
            padding: 1px 5px;
            border-radius: 5px;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(-50%);
            position: absolute;
            left: 50%;
            top: -30px;
        }

        .product-grid .social li a:after {
            content: '';
            height: 15px;
            width: 15px;
            border-radius: 0;
            transform: translateX(-50%) rotate(45deg);
            top: -20px;
            z-index: -1;
        }

        .product-grid .social li a:hover:before,
        .product-grid .social li a:hover:after {
            opacity: 1;
        }

        @media only screen and (max-width: 990px) {
            .product-grid {
                margin-bottom: 30px;
            }
        }

        .row-show {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .row-leftshow {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .mydiv {

            border: #909090 1px solid;

            background: #fff;

            color: #333;

            filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090, direction=120, strength=4);

            -moz-box-shadow: 2px 2px 10px #909090;

            -webkit-box-shadow: 2px 2px 10px #909090;

            box-shadow: 2px 2px 10px #909090;

            height: 200px;
        }
    </style>
{% endblock %}